<!DOCTYPE html>
<html>
	<head>
		 <meta charset="utf-8">
		<title>练习</title>
		<script src="js/d3.v4.min.js" charset="utf-8"></script>
	</head>
	<body>
		
		<script>
			var dataset=[
						 [0.5,0.5,250],[0.7,0.8,223],[0.4,0.9,195],[0.11,0.32,112],[0.88,0.25,150],
						 [0.75,0.12,300],[0.5,0.1,130],[0.2,0.3,120],[0.4,0.1,380],[0.6,0.7,30]
						];
			var height=600;
			var width=600;
			var padding={left:50,top:20,right:50,bottom:20};
			var xAxisWidth=width-padding.left-padding.right;
			var yAxisHeight=height-padding.top-padding.bottom;
			var svg=d3.select("body").append("svg").attr("height",height).attr("width",width);
			//定义比例尺
			var	xScale=d3.scaleLinear()
					     .domain([0,Math.round(d3.max(dataset,function(d){return d[0];}))*1.1])
					     .range([0,xAxisWidth]);
			var yScale=d3.scaleLinear()
						 .domain([0,Math.round(d3.max(dataset,function(d){return d[1];}))*1.1])
						 .range([0,yAxisHeight]);
			var rScale=d3.scalePow()
						 .exponent(0.25)
						 .domain([0,Math.round(d3.max(dataset,function(d){return d[2];}))*1.1])
						 .range([0,20])
			//添加圆形散点
			var circle=svg.selectAll("circle")
						  .data(dataset)
						  .enter()
						  .append("circle")
						  .attr("cx",function(d,i){return padding.left+xScale(d[0]);})
						  .attr("cy",function(d,i){return height-padding.bottom-yScale(d[1]);})
						  .attr("r",function(d,i){return rScale(d[2]);})
						  .attr("fill","yellow");
			//添加文字
			var text=svg.selectAll("text")
						.data(dataset)
						.enter()
						.append("text")
						.attr("x",function(d,i){return padding.left+xScale(d[0]);})
						.attr("y",function(d,i){return height-padding.bottom-yScale(d[1]);})
						.attr("text-anchor","middle")
						.text(function(d){return d[2];})
						.attr("font-size","12px");
			//添加坐标轴
			var xAxis=d3.axisBottom(xScale);
			var yAxis=d3.axisLeft(yScale);
			yScale.range([yAxisHeight,0])
			svg.append("g")
			   .attr("transform","translate("+padding.left+","+(padding.top+yAxisHeight)+")")
			   .call(xAxis);
			svg.append("g")
			   .attr("transform","translate("+padding.left+","+(padding.top)+")")
			   .call(yAxis);

		</script>
		
	</body>
</html>
